<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动效果</title>
	<style type="text/css">
		 * {
        margin: 0;
        padding:0;
    }

		div{
			width: 882px;
			height: 86px;
			margin: 0 auto;
			margin-top: 100px;
			border: 3px solid skyblue;
			overflow: hidden;
			
		}
		div ul{
			animation:roll  5s linear infinite;
			width: 200%;
			list-style:none

		}
		@keyframes roll{
			form{
				transform: translateX(0);
			}
			to{
				transform: translateX(-882px);
			}
		}
	
		li{
			float: left;
		}
		
	</style>
</head>
<body>
		<div>
			<ul>
				<li><img src="images/nav1.jpg" alt=""></li>
				<li><img src="images/nav2.jpg" alt=""></li>
				<li><img src="images/nav3.jpg" alt=""></li>
				<li><img src="images/nav4.jpg" alt=""></li>
				<li><img src="images/nav5.jpg" alt=""></li>
				<li><img src="images/nav6.jpg" alt=""></li>
				<li><img src="images/nav7.jpg" alt=""></li>
				<li><img src="images/nav1.jpg" alt=""></li>
				<li><img src="images/nav2.jpg" alt=""></li>
				<li><img src="images/nav3.jpg" alt=""></li>
				<li><img src="images/nav4.jpg" alt=""></li>
				<li><img src="images/nav5.jpg" alt=""></li>
				<li><img src="images/nav6.jpg" alt=""></li>
				<li><img src="images/nav7.jpg" alt=""></li>
			</ul>
		</div>
</body>
</html>